{extend name="layout/app" /}

{block name="title"}修改头像{/block}

{block name="css"}
<style>

</style>
{/block}

{block name="content"}
<div class="container mt-4">
    <div class="row">
        <div class="col-sm-3">
            {include file='common/user-menu' /}
        </div>
        <div class="col-sm-9 p-0">
            <div class="card">
                <div class="card-header bg-white fs-14">
                    修改头像
                </div>
                <div id="div-msg">
                </div>
                <div class="card-body">
                    <form id="form-avatar" enctype="multipart/form-data" method="post" action="{:url('/user/avatar')}" class="col-md-6 offset-3">
                        <meta name="csrf-token" id="__token__" content="{:token()}">
                        <div class="form-group">
                            <label for="exampleFormControlFile1">请选择头像上传</label>
                            <input type="file" name="avatar" class="form-control-file" id="exampleFormControlFile1">
                        </div>
                        <button type="button" id="btn-avatar" class="btn btn-primary btn-sm w-100 mt-4 bg-blue text-white">修改</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    $(function () {
        // 显示提示信息
        $('#btn-avatar').click(function () {
            var form = $('#form-avatar');
            var formdata = new FormData(document.getElementById("form-avatar"));
            $.ajax({
                url: form.attr('action'),
                type: 'post',
                data: formdata,
                processData:false,
                contentType:false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    if (res.code == 200){
                        window.location.reload()
                    } else if (res.code == 400){
                        $('#div-msg').addClass('alert alert-danger')
                        $('#div-msg').html(`${ res.msg }`);
                    }
                }
            })
        })

    })
</script>
{/block}